<!DOCTYPE html>
<html>
<head>
<title>SVG and Canvas Testing</title>
<link rel="stylesheet" type="text/css" href="css/master.css" />
</head>
<body>

<div class="note">
	<h2>Notes</h2>
	<ul>
		<li>SVG's basically only take on 2 styles: <strong>fill</strong> and <strong>stroke</strong>. These must be applied inline.</li>
		<li>Canvas isn't much better. Basically no CSS. Everything is JavaScript.</li>
	</ul>
</div>

<h1>SVG Test</h1>

<h2>SVG Object</h2>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="120">
  <polygon points="0,60 60,0 120,0 180,60 120,120 60,120"
  style="fill:lime;stroke:purple;stroke-width:1;" />
</svg>

<h2>SVG File</h2>
<object data="images/map.svg" type="image/svg+xml" width="959" height="593" id="state-map"></object>

<hr/>

<h1>Canvas Test</h1>

<canvas id="myCanvas" width="180" height="120"></canvas>
<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(0,60);
	ctx.lineTo(60,0);
	ctx.lineTo(120,0);
	ctx.lineTo(180,60);
	ctx.lineTo(120,120);
	ctx.lineTo(60,120);
	ctx.closePath();
	ctx.stroke();
	
	ctx.fillStyle="#FF0000";
	ctx.fill();
</script>


<div class="clear"></div>

</body>
</html>